import React from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { Button, Card, Form, Input, Select, Spin, Checkbox } from 'antd';
import { history, connect } from 'umi';
import styles from './addMenu.less';

const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
    }
};

@connect(({ SysMenuManageModels, dictionary, loading }) => ({
    SysMenuManageModels,
    dictionary,
    loading: loading.global
}))
@Form.create()
class AddMenu extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        const {
            dispatch
        } = this.props;
        dispatch({
            type: 'SysMenuManageModels/fetchListMenu',
            payload: {}
        });
    }

    addMenuHandler = () => {
        const {
            dispatch,
            form
        } = this.props;

        form.validateFieldsAndScroll((err, fieldsValue) => {
            if (err) return;
            console.log(fieldsValue);
            dispatch({
                type: 'SysMenuManageModels/fetchAdd',
                payload: {
                    ...fieldsValue
                },
                callback: () => {
                    history.push('/setting/sysMenuManage');
                }
            });
        });
    };

    handleCancel = () => {
        history.push('/setting/sysMenuManage');
    };

    checkBoxOnchange = val => {
        alert(val);
    };

    render() {
        const {
            SysMenuManageModels: { parentMenu },
            loading
        } = this.props;

        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const menuType = [
            {
                key: 1,
                value: '目录'
            },
            {
                key: 2,
                value: '菜单'
            },
            {
                key: 3,
                value: '按钮'
            },
            {
                key: 4,
                value: '接口'
            }
        ];
        const menuStatus = [
            {
                key: 0,
                value: '显示'
            },
            {
                key: 1,
                value: '隐藏'
            }
        ];
        const options = [
            { label: '普通用户', value: '1' },
            { label: '超级用户', value: '2' }
        ];
        const parentMenuOperation = (data = []) =>
            Array.isArray(data) && data.map(item => (
                <Option key={item.menuName} value={item.id}>
                    {item.menuName}
                </Option>
            ));

        const menuTypeOperation = (data = []) =>
            Array.isArray(data) && data.map(item => (
                <Option key={item.value} value={item.key}>
                    {item.value}
                </Option>
            ));
        const menuStatusOperation = (data = []) =>
            Array.isArray(data) && data.map(item => (
                <Option key={item.value} value={item.key}>
                    {item.value}
                </Option>
            ));
        return (<PageHeaderWrapper>
            <Spin spinning={loading}>
                <Card bordered={false}>
                    <Form layout="horizontal" {...formItemLayout}>
                        <div className={styles.title}>
                            新增菜单权限
                        </div>
                        <FormItem label="菜单名" extra="2-50个字符，限中文字符">
                            {getFieldDecorator('menuName', {
                                rules: [
                                    {
                                        required: true,
                                        message: '菜单名不能为空'
                                    },
                                    {
                                        min: 2,
                                        max: 30,
                                        message: '菜单名长度必须在2-30个字符'
                                    }
                                ]
                            })(<Input placeholder="请输入菜单名"/>)}
                        </FormItem>
                        <FormItem label="菜单code">
                            {getFieldDecorator('url', {
                                rules: [
                                    {
                                        required: true,
                                        message: '菜单code不能为空'
                                    },
                                    {
                                        min: 2,
                                        max: 100,
                                        message: '菜单名长度必须在2-100个字符'
                                    }
                                ]
                            })(<Input placeholder="请输入菜单code eg:office:orgs:views:level"/>)}
                        </FormItem>
                        <FormItem label="菜单权限">{getFieldDecorator('permission', {
                            rules: [
                                {
                                    required: true,
                                    message: '菜单权限不能为空'
                                },
                                {
                                    min: 1,
                                    max: 200,
                                    message: '菜单名长度必须在2-200个字符'
                                }
                            ]
                        })(<Input
                            placeholder="请输入菜单权限 eg:/api/oa/v1/employee/getlist"/>)}
                        </FormItem>
                        <FormItem label="上级菜单">
                            {getFieldDecorator('parentId', {
                                rules: [
                                    {
                                        required: true,
                                        message: '上级菜单不能为空'
                                    }
                                ]
                            })(<Select
                                showSearch
                                placeholder="上级菜单"
                                allowClear
                                filterOption={(input, option) =>
                                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {parentMenuOperation(parentMenu.data)}
                            </Select>)}
                        </FormItem>
                        <FormItem label="菜单类型">
                            {getFieldDecorator('type', {
                                initialValue: 1,
                                rules: [
                                    {
                                        required: true,
                                        message: '菜单类型不能为空'
                                    }
                                ]
                            })(
                                <Select
                                    placeholder="菜单类型"
                                    allowClear
                                >
                                    {menuTypeOperation(menuType)}
                                </Select>)}
                        </FormItem>
                        <FormItem label="菜单状态">
                            {getFieldDecorator('visible', {
                                initialValue: 0,
                                rules: [
                                    {
                                        required: true,
                                        message: '菜单状态不能为空'
                                    }
                                ]
                            })(
                                <Select
                                    showSearch
                                    placeholder="菜单状态"
                                    allowClear
                                >
                                    {menuStatusOperation(menuStatus)}
                                </Select>)}
                        </FormItem>
                        <FormItem label="显示顺序">
                            {getFieldDecorator('orderNum', {
                                rules: [
                                    {
                                        required: true,
                                        message: '显示顺序不能为空'
                                    }
                                ]
                            })(<Input type="number" placeholder="请显示顺序"/>)}
                        </FormItem>
                        <FormItem label="国际化">
                            {getFieldDecorator('international', {})(<Input placeholder="国际化"/>)}
                        </FormItem>
                        <FormItem label="备注">
                            {getFieldDecorator('remark', {})(<Input placeholder="备注"/>)}
                        </FormItem>
                        <FormItem label="默认要加入的角色">
                            {getFieldDecorator('defaultRole', {})(<Checkbox.Group options={options} onChange={this.checkBoxOnchange}/>)}
                        </FormItem>
                        <FormItem
                            wrapperCol={{
                                xs: { span: 24, offset: 0 },
                                sm: { span: 8, offset: 3 }
                            }}
                        >
                            <Button type="primary" onClick={this.addMenuHandler}>
                                新增
                            </Button>
                            <Button loading={loading} style={{ marginLeft: '20px' }} onClick={this.handleCancel}>
                                取消
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
            </Spin>
        </PageHeaderWrapper>);
    }
}

export default AddMenu;
